<template>
    <div>
        <div class="contentMid"></div>

        <el-card class="box-card">

            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>

                <el-form-item label="取证类型：">
                    <el-select v-model="ruleForm.types" placeholder="请选择" prop="types">
                        <el-option label="网页取证" value="网页取证" />
                    </el-select>
                </el-form-item>

                <el-form-item label="取证地址：" prop="addr">
                    <el-input v-model="ruleForm.addr" placeholder="请输入取证地址" />
                </el-form-item>



                <el-form-item label="取证名称：" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入取证名称(最多20个字符)" />
                </el-form-item>

                <el-form-item label="备注：">
                    <el-input v-model="ruleForm.desc" type="textarea" :rows="5" placeholder="请输入文件备注" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="btn" @click="submitForm()">
                        立即取证
                    </el-button>
                </el-form-item>

            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {useRouter} from "vue-router"
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios';
let router=useRouter()
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入取证名称', trigger: 'blur' },

    ],
    addr: [
        { required: true, message: '请输入取证地址', trigger: 'blur' },

    ],
    types: [
        {
            required: true,
            message: '请选择类型',
            trigger: 'change',
        },
    ],
})

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
// do not use same name with ref
const ruleForm = reactive({
    types: '',
    addr: '',
    name: '',
    desc: '',
    obtainum:""
})



const submitForm = async () => {
    axios.post("/api/opertion/obtadd",{data:ruleForm}).then(res=>{
        console.log(res);
        router.back()
    })
}
</script>

<style lang="less" scoped>
.contentMid {
    height: 30px;
}

.el-form {
    width: 50%;

    .el-form-item {
        margin-bottom: 40px;

        .el-select {
            // border: 1px solid;
            width: 300px;
            height: 32px;
            border: 1px solid;
        }

        .el-input {
            width: 447px;
            height: 36px;
            color: rgb(153, 153, 153)
        }
    }
    .btn{
        margin-top: 40px;
    }
}

/* 卡片 */
.box-card {
    padding: 20px 40px;
    width: 89%;
    margin: auto;
    min-height: 530px;
}
</style>